<!-- “资讯服务→游记欣赏” 组件 -->
<template>
  <div class="img_card">

    <div class="img_card-all" :class="{imgZoomBorder: showBorder}" v-for="item in sightseeingTabData" :key="item.id">
      <div class="img-range">
        <img class="img_card-con" v-lazy="item.sightseeingImgZoom" alt="">
      </div>

      <slot></slot>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    sightseeingTabData: {
      type: Array,
      default: () => []
    },
    showBorder: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.img_card {
  width 100%
  min-height 600px
}
.imgZoomBorder {
  border 1px solid #ddd
}
.img_card-all {
  margin 10px
  position relative
  width 380px
  height 435px
  display inline-block
  &:hover {
    .img-range {
      .img_card-con {
        transform scale(1.2)
      }
    }
  }
}
.img-range {
  overflow hidden
  width 380px
  height 270px
  .img_card-con {
    overflow hidden
    width 380px
    height 270px
    transition transform 1s
  }
}
/** 方法二 animate */

// img:hover {
//   animation imgScale 2s
// }
// @keyframes imgScale {
//   from {
//     width 200px
//     height 200px
//   }
//   to {
//     width 240px
//     height 240px
//   }
// }
</style>
